<script setup lang="ts">
import { useRouter } from 'vue-router';

const router=useRouter()
function backClick(){
    router.go(-1)
}

</script>
<template>

    <main class="box">
        <header class="header">
      <slot  name="left">
      <div class="back">
        <van-icon color="#d6d6d6" size="20" @click="backClick" name="arrow-left" />
        <span @click="backClick">返回</span>
      </div>
 
      </slot>
      <span>消息中心</span>
      <slot name="right"></slot>
  </header>
    <div class="content"> 
        <van-cell title="系统消息" label="暂无系统消息" class="cell"  label-class="label">
  <template #icon>
    <van-image src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%B6%88%E6%81%AF%E4%B8%AD%E5%BF%83/u3002.svg" class="img"  />
  </template>
</van-cell>
<van-cell title="优惠活动" label="不好意思暂无优惠活动" class="cell"  label-class="label">
  <template #icon>
    <van-image src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%B6%88%E6%81%AF%E4%B8%AD%E5%BF%83/u3002.svg" class="img"  />
  </template>
</van-cell>
    </div>
    </main>
</template>

<style lang="scss" scoped>
.header{
    color: black;
    background-color: white;
   .back{
    position: absolute;
    left: 0;
    top: 0;
    span{
        color: blue;
    }
   }
}
.content{
    background-color: #f4f6f9;
    width: 100%;
    .img{
        width: 50px;
    }
    .cell{
        font-size: 16px;
    }
    ::v-deep .van-cell .label {
        font-size: 17px;
        font-weight: 700;
        color: black;
    }
}


</style>
    